<template>
  <div class="left-container">
    <h2 ref="h2">Left</h2>
    <p ref="p">{{ age }}</p>
    <button @click="age++">+1</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from '@/components/ArtList.vue'
export default {
  components: {
    ArtList
  },
  data () {
    return {
      age: 20
    }
  },
  // 第1个钩子函数
  beforeCreate () {
    console.log('beforeCreate', this.age)
  },
  // 第2个钩子函数
  created () {
    console.log('created', this.age)
  },
  // 第3个钩子函数
  beforeMount () {
    console.log('beforeMount', this.$refs.h2)
  },
  // 第4个钩子函数
  mounted () {
    console.log('mounted', this.$refs.h2)
  },
  // 第5个钩子函数
  beforeUpdate () {
    console.log('beforeUpdate', this.age, this.$refs.p.innerHTML)
  },
  // 第6个钩子函数
  updated () {
    console.log('updated', this.age, this.$refs.p.innerHTML)
  },
  // 7. beforeDestroy
  beforeDestroy () {
    console.log('父 - beforeDestroy')
    // console.log(this.$refs.artlistRef) // 这里的artlistRef 是 子组件的ref
  },
  // 8. destroyed
  destroyed () {
    console.log('父 - destroyed')
    // console.log(this.$refs.artlistRef) // 这里的artlistRef 是 子组件的ref
  }
  // errorCaptured (err, vm, info) {
  //   console.log(err.message) // 输出错误描述信息
  //   console.log(vm) // 发生错误的组件 的实例对象
  //   console.log(info) // 也是一个描述信息
  //   return false // 阻止错误继续传播
  // }
}
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>